<template>
    <div class="register">
        <van-form @submit="onSubmit">
        <van-field
            v-model="username"
            name="username"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field name="radio" label="性别">
        <template #input>
            <van-radio-group v-model="radio" direction="horizontal">
            <van-radio name="1">男</van-radio>
            <van-radio name="2">女</van-radio>
            </van-radio-group>
        </template>
        </van-field>
        <van-field
            v-model="tel"
            type="tel"
            name="tel"
            label="手机号码"
            placeholder="手机号码"
            :rules="[{ required: true, message: '请填写手机号' }]"
        />


        <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
        </van-form>
    </div>
</template>

<script>
    export default {
    data() {
        return {
        username: '',
        password: '',
        radio: '1',
        tel: ""
        };
    },
    methods: {
        onSubmit(values) {
        console.log('submit', values);
        this.$axios.post('/api/register', values).then(data=> {
            console.log(data.data);
            if(data.data.code == 200) {
                alert(data.data.msg)
                this.$router.push("/enters" )
            } else {
                alert(data.data.msg)
            }
        })
        },
    }
    };
</script>